class GameArea {
  constructor() {
    this.canvas = document.createElement("canvas");
    this.frameNo = 0;
    this.start();
    document.addEventListener("keydown", function (e) {
      this.key = e.keyCode;
    });
    document.addEventListener("keyup", function (e) {
      this.key = false;
    });
  }

  start() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.border = "1px solid gray";
    this.canvas.style.backgroundColor = "lightgray";
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }

  clear() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

export default GameArea;
